<script setup>
import { ref,reactive, nextTick,onActivated,getCurrentInstance,onMounted, watch  } from 'vue'; 
import { useRoute,useRouter } from 'vue-router';
import { ElMessage,ElMessageBox  } from 'element-plus';
import TopBar from '@/components/Topbar/index.vue';
import getRules from "@/validUtils";

const backValue = ref('LogisticsToolsIndex');
const tabName = ref("新建地址");

const sumbit = ()=>{

}
const form = ref({
    contact:"",
    area:"",
    detail:"",
    mobilePhone:"",
    areaCode:"",
    phone:"",
    otherPhone:""
})
const rules = ref({
    mobilePhone:[
        { validator: (rule,value,callback)=>{
            const reg = /^(\+86|0086)?\s*1[345789]\d{9}$/;
            if(!reg.test(value)){
                callback(new Error("请输入正确的手机号码"))
            }else{
                callback()
            }
        }, trigger: 'change' }
    ],
    areaCode:[
        { validator: (rule,value,callback)=>{
            const reg = /^[0-9]+(\.[0-9]+)?$/;
            if(((form.value.areaCode??'') === '') && ((form.value.phone??'') === '')){
                callback()
            }
            if(!reg.test(value)){
                callback(new Error("请输入正确的区号"))
            }else{
                if((form.value.phone??'') !== ''){
                    if((form.value.areaCode??'') === ''){
                        callback(new Error("请输入区号"))
                    }else{
                        callback()
                    }
                }else{
                    callback()
                }
            }
        }, trigger: 'change' }
    ],
    phone:[
        { validator: (rule,value,callback)=>{
            const reg1 = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
            const reg2 = /0\d{2,3}-\d{7,8}/
            if(((form.value.areaCode??'') === '') && ((form.value.phone??'') === '')){
                callback()
            }
            if (!reg1.test(value)&&!reg2.test(value)) {
                callback(new Error("请输入正确电话号码"))
            }else{
                if((form.value.areaCode??'') !== ''){
                    if((form.value.phone??'') === ''){
                        callback(new Error("请输入电话号码"))
                    }else{
                        callback()
                    }
                }else{
                    callback()
                }
            }
        }, trigger: 'change' }
    ],
    otherPhone:[
        { validator: (rule,value,callback)=>{
            const reg1 = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
            const reg2 = /0\d{2,3}-\d{7,8}/
            if(((form.value.otherPhone??'') === '')){
                callback()
            }
            if (!reg1.test(value)&&!reg2.test(value)) {
                callback(new Error("请输入正确电话号码"))
            }else{
                callback()
            }
        }, trigger: 'change' }
    ]
})


</script>
<template>
    <div class="page-contain">
        <TopBar :backValue="backValue" :tabName="tabName">
            <template #operate>
                <el-button style="min-width: 68px">取消</el-button>
                <el-button type="primary" style="min-width: 68px" @click="sumbit">保存</el-button>
            </template>
        </TopBar>
        <div class="info-contain">
            <div class="warning-tips">
                <img src="@/assets/icon/warning-icon.png" alt="">
                <span>手机号码、电话号码选填一项，其余均为必填项。</span>
            </div>
            <div class="form-contain">
                <el-form :model="form" label-width="80px" :rules="rules">
                    <el-form-item label="联系人" :rules="getRules('input', '联系人')" prop="contact">
                        <el-input v-model="form.contact" placeholder="请输入" style="width:260px" maxlength="5" show-word-limit/>
                    </el-form-item>
                    <el-form-item label="所在地区" :rules="getRules('select', '所在地区')" prop="area">
                        <el-select v-model="form.area" placeholder="请选择"  clearable v-selectClose style="width:260px">
                            <el-option label="Zone one" value="shanghai" />
                            <el-option label="Zone two" value="beijing" />
                        </el-select> 
                    </el-form-item>
                    <el-form-item label="详细地址" :rules="getRules('input', '详细地址')" prop="detail">
                        <el-input v-model="form.detail" placeholder="请输入" style="width:260px;" :rows="5" type="textarea" maxlength="100" show-word-limit/>
                    </el-form-item>
                    <el-form-item label="手机号码" prop="mobilePhone">
                        <el-input v-model="form.mobilePhone" placeholder="请输入" style="width:260px"/>
                    </el-form-item>
                    <el-form-item label="电话号码" >
                        <div class="in-line">
                            <div>
                                <el-form-item label="" label-width="0px" prop="areaCode">
                                    <el-input v-model="form.areaCode" placeholder="区号" style="width:120px" clearable/>
                                </el-form-item>
                            </div>
                            <div class="fgf">
                                -
                            </div>
                            <div>
                                <el-form-item label="" label-width="0px" prop="phone">
                                    <el-input v-model="form.phone" placeholder="电话" style="width:120px" clearable/>
                                </el-form-item>
                            </div>
                            <div class="fgf">
                                -
                            </div>
                            <div>
                                <el-form-item label="" label-width="0px" prop="otherPhone" >
                                    <el-input v-model="form.otherPhone" placeholder="分机电话" style="width:120px" clearable/>
                                </el-form-item>
                            </div>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </div>

    </div>
</template>
<style lang="less" scoped>
.in-line{
    width: 100%;
    display: flex;
    justify-content: flex-start;
}
.page-contain{
    width: 100%;
    height: 100%;
    .info-contain{
        width: 100%;
        height: calc(100% - 48px);
        box-sizing: border-box;
        .warning-tips{
            width: 100%;
            display: flex;
            height: 40px;
            justify-content: flex-start;
            align-items: center;
            box-sizing: border-box;
            padding:0 26px;
            background: #FFFBF2;
            img{
                width: 18px;
                height: 18px;
                margin-right: 6px;
            }
            span{
                color:#FFAB00;
                font-size: 14px;
                line-height: 14px;
                font-weight: 400;
            }
        }
        .form-contain{
            width: 100%;
            padding:16px 24px;
            box-sizing: border-box;
            overflow: auto;
            height: calc(100% - 40px);
            .fgf{
                color: #222222;
                font-size: 14px;
                font-weight: 400;
                line-height: 32px;
                margin:0 8px;
            }
        }
    }
}
</style>